<template>

	   <div   v-for="(item, index) in data" :key="index"   class="card art-custom-card" >
		    <div class="card-header">
		 <span style="font-size: 1.6rem; font-weight: 400;">请休假申请</span> 
						<div   style=" height: 3.5rem;  width: calc(75% - 16px); background-color: rgba(112, 135, 181, 0.08); 
						 display: flex; align-items: center; font-size: 1.1em;">
							
							<span style="color: rgb(153, 153, 153); margin-left: 1rem; ">当前状况</span>
															<span style="margin-left: 1rem;" >{{item.zhuang}}</span>	 
										
															 <span style="color: rgb(153, 153, 153); margin-left: 15rem;">当前节点</span>
															 	<span style="margin-left: 1rem;">{{item.jieidan}}</span>	 
											</div>
											 
							</div>
							<div   style=" height: 3.5rem; display: flex; font-size: 1.2em;">
								<span style="  color: rgb(153, 153, 153); margin-left: 1rem; ">创建时间</span>
																<span style="margin-left: 1rem;" >{{item.time}}</span>	
																
																
											<div   style=" height: 3.5rem; display: flex;  align-items: center;font-size: 1.1rem;margin-left: 9rem;  ">
														<span style="color: rgb(153, 153, 153); margin-left: 1rem; ">流程发起人</span>
														<span style="margin-left: 1rem;" >{{item.people}}</span>	 
																								
															<span style="color: rgb(153, 153, 153); margin-left: 13.5rem; ">类别</span>
															<span style="margin-left: 1rem;" >{{item.lie}}</span>	 
														<span style="color: rgb(153, 153, 153); margin-left: 10rem; ">起止时间</span>
														<span style="margin-left: 1rem;" >{{item.stime}}</span>	 
																
																</div>
												</div>
							
						</div>

	   
	   
</template>

<script lang="ts" setup>


const activeIndex = ref('1')
const isVisible = ref(true);
const data = reactive([
	{
		zhuang: '已完成',
		jieidan: '归档',
		time: '2024-05-16 09:31:57',
		people: '体验用户',
		lie: '病假',
		stime:'2024-05-09 09:00:00——05-10 18:00:00',
	},
	
	{
		zhuang: '未完成',
		jieidan: '待部门审核',
		time: '2024-07-12 10:21:37',
		people: '体验用户',
		lie: '婚假',
		stime:'2024-07-12 09:00:00——05-10 18:00:00',
	},
	
	
	
])




</script>



<style lang="scss" scoped>
	  @use './style';
 .card {
	  
	 //margin-left: 73%;
	 margin-top: 1rem;
    width: 100%;
    height: 12rem;
    overflow: hidden;

    .card-header {
		//width: 15rem;
	margin-top: 1rem;
      padding-left: 25px !important;
    }

    :deep(.el-table__body tr:last-child td) {
      border-bottom: none !important;
    }

    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 6px;
    }

    .user-name {
      margin-left: 10px;
    }
  }
</style>